import * as THREE from 'https://unpkg.com/three@0.132.2/build/three.module.js';
import { OrbitControls } from './js/o.js';

//创建场景
const scene = new THREE.Scene();

//创建相机
const camera = new THREE.PerspectiveCamera(80,window.innerWidth/window.innerHeight,
    0.1,1000);

//创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);


const colorArr = ['red','green','blue','pink','orange','white']
const materialArr = colorArr.map(colorStr=>{
    return new THREE.MeshBasicMaterial({
        color:colorStr
    })
})

const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshBasicMaterial({color:0x00ff00});
// const cube = new THREE.Mesh(geometry,material);
const cube = new THREE.Mesh(geometry,materialArr);
scene.add(cube);

const cube2 = new THREE.Mesh(geometry,material);
scene.add(cube2);
cube2.position.x = 1;
cube2.position.y = 1;

camera.position.z = 5;
camera.position.x = 1;
camera.position.y = 1;

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

renderer.render(scene,camera);

let controls;

function createOrbit(){
    controls = new OrbitControls(camera,renderer.domElement);
    controls.update();
}

function animate(){
    requestAnimationFrame(animate);
    cube.rotation.x+=0.01
    cube.rotation.y+=0.01
    cube.rotation.z+=0.01
    controls.update();
    renderer.render(scene,camera);
}
createOrbit();
animate();

